<template>
  <a-col>
    <a-row class="tabs" :align="'middle'">
      <a-col
        v-for="tab in hasAuthTabs"
        :key="tab.key"
        :class="['tab', 'cursor', selectedTab === tab.key && 'tab--active']"
        @click="selectTab(tab.key)"
      >
        {{ tab.name }}
      </a-col>
    </a-row>
  </a-col>
</template>
<script lang="ts" setup>
  import { computed } from 'vue'

  import { checkKey } from '@/directives/auth'

  export interface Tab {
    name: string
    key: string
    auth?: string
  }

  // type Tabs = Tab[] | []
  interface Props {
    tabs: Tab[]
    selectedTab: string
  }

  let props = withDefaults(defineProps<Props>(), {
    tabs: () => [],
    selectedTab: ''
  })
  const selectTab = (key: string) => {
    emits('switchTab', key)
  }
  const hasAuthTabs = computed(() =>
    props.tabs.filter(tab => {
      return checkKey(tab.auth || '')
    })
  )
  let emits = defineEmits(['switchTab'])
</script>
<style lang="less" scoped>
  .tabs {
    .tab {
      padding: 0 12px;
      height: 30px;
      font-size: 14px;
      color: rgba(17, 22, 31, 0.75);
      border-radius: 6px;
      font-weight: 700;
      cursor: pointer;
      .font14b();
      .fc();

      &:hover {
        background: rgba(17, 22, 31, 0.05);
      }

      &--active {
        color: #1868e9;
        background-color: rgba(24, 104, 233, 0.1);
      }

      & + .tab {
        margin-left: 10px;
      }
    }
  }
</style>
